import { getStudyPackageIncludes } from '@/api/Plan';
import CusDrawer from '@/components/CusDrawer';
import ResourceNameForTable from '@/components/resourceLibraryComp/ResourceNameForTable';
import { Button, Descriptions, Spin } from 'antd';
import { groupBy, isEmpty } from 'lodash-es';
import { useEffect, useMemo, useState } from 'react';
import OStyle from './index.less';
import { TemplatePreviewDrawerProps } from './interface';

const RESOURCEMAP: any = {
  vido: { resourceFrom: 'videoCourseWare', text: '视频课件' },
  txt: { resourceFrom: 'graphicCourseWare', text: '图文课件' },
  pdf: { resourceFrom: 'pdfCourseWare', text: 'pdf课件' },
  paper: { resourceFrom: 'testPaper', text: '试卷' },
};

function TemplatePreviewDrawer(props: TemplatePreviewDrawerProps) {
  const { prevDetail, tpOpen, onTpUse, OnTpClose } = props;
  const [loading, setLoading] = useState(false);
  const [studyPackageMap, setStudyPackageMap] = useState<Record<string, any>>();

  const tempPreviewConfig = useMemo(
    () => ({
      width: 600,
      open: tpOpen,
      onClose: () => {
        OnTpClose();
      },
      destroyOnClose: true,
      title: '计划信息',
      extra: (
        <Button type="primary" onClick={onTpUse}>
          使用
        </Button>
      ),
    }),
    [tpOpen],
  );

  useEffect(() => {
    setLoading(true);
    //course：课程 package：包 learn：学习计划
    getStudyPackageIncludes({
      relationType: 'learn',
      relationId: prevDetail.guid,
      pageSize: 9999,
      pageNum: 1,
    })
      .then((res) => {
        console.log('--res--:', res);
        const {
          code,
          data: { list },
        }: any = res;
        if (code === '200') {
          //排序 prevItem在左nextItem在右 -1 不交换顺序(从小到大) 1 交换顺序(从大到小)
          const sortList = list.sort((prevItem: any, nextItem: any) => prevItem.sortNum - nextItem.sortNum);
          //分组
          const newListMap = groupBy(sortList, 'sortNum');
          console.log('--newListMap--:', newListMap);
          setStudyPackageMap(newListMap);
        }
      })
      .finally(() => {
        setLoading(false);
      });
  }, [prevDetail.guid]);

  return (
    <CusDrawer {...tempPreviewConfig}>
      <Spin spinning={loading}>
        <Descriptions
          title="基本信息"
          labelStyle={{ width: 72, justifyContent: 'flex-end' }}
          column={2}
          className="ym_descriptions"
        >
          <Descriptions.Item label="类型" span={1}>
            {prevDetail.cycleType == 'fixed' ? '固定时间' : `每${prevDetail.cycleDay}日一学`}
          </Descriptions.Item>
          <Descriptions.Item label="计划名称" span={1}>
            {prevDetail.name}
          </Descriptions.Item>
          {prevDetail.cycleType == 'cycle' && (
            <Descriptions.Item label="学习机制" span={1}>
              {prevDetail.learnMode === 'order' ? '顺序轮学' : '随机抽学'}
            </Descriptions.Item>
          )}
          {prevDetail.faceImg && (
            <Descriptions.Item label="封面图" span={1}>
              <img src={prevDetail.faceImg} alt="封面图" width={186} height={99} />
            </Descriptions.Item>
          )}
        </Descriptions>
        <Descriptions
          title="学习内容"
          labelStyle={{ width: 72, justifyContent: 'flex-end' }}
          column={2}
          className="ym_descriptions"
        >
          {!isEmpty(studyPackageMap) && (
            <Descriptions.Item label="" span={2} style={{ width: '100%' }}>
              <div style={{ width: '548px', padding: '0 16px' }}>
                {Object.keys(studyPackageMap).map((key: string, mapIndex: number) => (
                  <ul key={key} className={OStyle.package_content_list}>
                    {studyPackageMap[key].map((listItem: any, listIndex: number) => (
                      <li className={OStyle.list_item} key={listItem.coursewareId}>
                        <ResourceNameForTable
                          title={listItem.name}
                          resourceType={0}
                          resourceFrom={RESOURCEMAP[listItem.coursewareType].resourceFrom}
                        />
                        <p className={OStyle.item_right}>
                          <span className={OStyle.right_text}>{RESOURCEMAP[listItem.coursewareType].text}</span>
                        </p>
                      </li>
                    ))}
                  </ul>
                ))}
              </div>
            </Descriptions.Item>
          )}
        </Descriptions>
      </Spin>
    </CusDrawer>
  );
}

export default TemplatePreviewDrawer;
